<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <!-- 左边 -->
          <el-button size="small" type="primary" @click="addClientsFn">添加客户</el-button>
          <!-- 右边 -->
          <div class="rghit" style="display: flex; align-items: center;">
            <!-- 右边下拉框 -->
            <el-form>
              <el-form-item>
                <el-select v-model="selectValue" placeholder="全部经纪" @change="ChangeAgents">
                  <!-- 这里循环数据 -->
                  <el-option v-for="item in agentsList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-form>
            <el-input
              v-model="inputValue"
              style="width: 400px;"
              size="small"
              placeholder="请输入关键字"
              suffix-icon="el-icon-date"
            />
            <el-button size="small" @click="screenFn">筛选</el-button>
          </div>
        </div>
        <hr>
        <!-- 表格 -->
        <el-table :data="clientsList">
          <el-table-column prop="image" label="图片">
            <!-- 注意这里是 scope-->
            <template slot-scope="{row}">
              <img :src="row.image" style="width: 40px; height: 40px;" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="agent" label="经纪">
            <template slot-scope="{row}">
              <span>{{ row.agent?row.agent.name:'' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="wechat" label="微信" />
          <el-table-column prop="desc" label="介绍" />

          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button size="small" type="primary" @click="editClientsFn(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delClientsFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination :total="total" layout="prev, pager, next" :page-size="pagesize" @current-change="changePage" />
        </el-row>
      </el-card>
      <!-- 添加客户组件 -->

      <clientsEdit ref="clientsEdit" :show-clients.sync="showClients" @update="dataSoue" />
    </div>
  </div>
</template>
<script>
import { getClients, getClientsCount, delClients } from '@/api/clients.js'
// 引入添加客户组件
import clientsEdit from './components/clients-edit'
// 引入获取经纪人信息接口
import { agentsList } from '@/api/agents.js'
export default {
  components: {
    clientsEdit
  },
  data() {
    return {
      page: 1, // 当前页码
      pagesize: 3, // 没有获取到数量
      total: 0, // 数据总量
      clientsList: [], // 客户列表数据
      inputValue: '', // 输入框的模糊值
      selectValue: '', // 选中的值
      showClients: false, // 弹窗的显示隐藏
      id: null, // 点击编辑按钮的id 保存起来
      agentsList: [], // 经纪数据
      agentId: '' // 经纪人id
    }
  },
  async created() {
    /* 3.初始化数据 */
    this.dataSoue()
    // 调用获取经纪人数据
    const res = await agentsList()
    this.agentsList = res
  },
  methods: {
    // 封装请求
    async dataSoue() {
      /* 1.计算分页 */
      // this.agentId  agentId:"" // => 查询全部数据
      const parm = {
        agent: this.agentId,
        name_contains: this.inputValue
      }
      // 筛选符合条件的数据的 总数量   比如根据经纪人id筛选 和 输入框模糊搜索
      // 如果 有 agentId 和 name_contains  就进行数据的筛选获取总数量  否则就获取所有数据总数量
      if (this.agentId || this.name_contains) {
        if (this.agentId) {
          // 根据 经纪人id 筛选数据数量
          this.total = await getClientsCount({ agent: this.agentId })
        } else if (this.name_contains) {
          // 根据 输入框关键字模糊搜索 筛选数据数量
          this.total = await getClientsCount({ name_contains: this.inputValue })
        } else {
          // 根据 经纪人id 和 输入框关键字模糊搜索 筛选数据数量
          this.total = await getClientsCount(parm)
        }
      } else {
        // 如果这个两都没有值就不要传入给他
        this.total = await getClientsCount()
      }

      /* 2.已知目前用到参数 只有 _limit 和 _start */
      const start = (this.page - 1) * this.pagesize
      // console.log(start)
      const data = {
        _limit: this.pagesize,
        _start: start
      }

      // 如果是 根据 经纪人id 筛选数据  就把 agent参数追加到data中
      if (this.agentId) {
        data.agent = this.agentId
      }
      // 如果是 根据 输入框关键字模糊搜索 筛选数据 就把 name_contains参数追加到data中
      if (this.inputValue) {
        data.name_contains = this.inputValue
      }

      // 没有经纪人id 和 输入框关键字模糊搜索 就直接调用获取客户列表数据接口函数 有就加进去
      const res = await getClients(data)
      // console.log(res)
      // 保存列表数据
      this.clientsList = res
    },

    // 点击切换分页重新请求数据
    changePage(page) {
      // console.log(page)
      // 更换页码
      this.page = page
      // 调用获取客户列表数据
      this.dataSoue()
    },
    // 添加客户按钮
    addClientsFn() {
      // 弹窗弹窗
      this.showClients = true
    },
    // 删除客户按钮
    async delClientsFn(id) {
      // 二次询问确认
      await this.$confirm('确认删除客户吗？')
      // 调用删除接口函数
      await delClients(id)
      // 当删除数据后 当前页已经没有数据来 那么我们可以请求上一页的数据
      // this.page > 1 页码大于1才能减 回到上一页请求数据
      // this.employeesList.length === 1 当前页数据是1 也就是当前页的数据剩下1条 这一条数据被你删除
      if (this.page > 1 && this.clientsList.length === 1) {
        // 当前页减1就是 上一页
        this.page--
      }
      // 调用获取客户列表数据
      this.dataSoue()
    },
    // 编辑客户按钮
    editClientsFn(id) {
      // console.log(131,id);
      // 父传子 把id传递给父组建
      this.id = id
      // 弹窗弹窗
      this.showClients = true
      // 获取弹窗组件中的getClientsInfo方法获取客户详情数据 进行回显 传递id
      this.$refs.clientsEdit.getClientsInfo(id)
    },
    // 点击按钮进行数据的筛选 输入框模糊搜索
    async screenFn() {
      this.dataSoue()
    },

    // 切换经纪人 筛选客户列表数据
    async ChangeAgents(agentId) {
      // 保存经纪id
      this.agentId = agentId
      // tthis.agentId  = "" >
      this.dataSoue()
    }
  }

}

</script>
<style lang="scss" scoped>
  .el-form-item {
    margin-bottom: 0;
  }

  ::v-deep .el-input__inner {
    height: 34px !important;
  }
</style>
